<template>
  <section>
    <second-nav :modelValue="plants" :cat_name="params.cat_name"></second-nav>
    <second-plant-1 :modelValue="plants[0]">
      <template v-slot="{ swiperData }" v-if="params.t_cat_pk == 29">
        <video
          class="swiper"
          :src="swiperData[0]?.resource_path"
          :title="swiperData[0]?.resource_name"
          controls
        ></video>
      </template>
    </second-plant-1>
    <section class="plant-row">
      <ul class="center-container plant-row-box">
        <li
          class="plant-item"
          v-for="item in three_plants"
          :key="item.t_plant_pk"
        >
          <second-plant-2 :modelValue="item"></second-plant-2>
        </li>
      </ul>
    </section>
    <second-plant-3 v-if="last_plant" :modelValue="last_plant"></second-plant-3>
  </section>
</template>
  
  <script>
import ajax from "@/util/request";
import SecondNav from "./second-nav.vue";
import SecondPlant1 from "./second-plant1.vue";
import SecondPlant2 from "./second-plant2.vue";
import SecondPlant3 from "./second-plant3.vue";

export default {
  components: { SecondNav, SecondPlant1, SecondPlant2, SecondPlant3 },
  props: {
    // 路由传入的params参数对象
    params: {
      type: Object,
    },
  },
  data() {
    return {
      plants: [],
    };
  },
  computed: {
    three_plants() {
      let count = 0;
      const arr = this.plants.filter((v) => {
        if (v.show_type > 0) {
          count++;
          return count <= 3;
        }
        return false;
      });
      console.log("Arr = ", arr);
      return arr;
    },
    last_plant() {
      return this.plants.find((v) => v.show_type == -1);
    },
  },
  watch: {
    params: {
      immediate: true,
      handler(newVal) {
        console.log("新的二级页面：", newVal);
        ajax("/plant/queryList", { t_cat_pk: newVal.t_cat_pk }).then(
          ({ data }) => {
            if (data.status > 0) {
              this.plants = data.result_data;
            }
          }
        );
      },
    },
  },
  methods: {
    handleClick() {
      // alert("提示");
      // window.alert({type: "success",message: "成功"})
    },
  },
};
</script>
  
  <style scoped>
.plant-row {
  background-color: #eee;
}
.plant-row-box {
  display: flex;
  padding: 15px 0px;
}

.plant-item {
  width: 33.33%;
}

.plant-item:nth-child(2) {
  padding: 0px 20px;
}
</style>